<template>
  <div class="_his_table" v-show="!mobile">
    <div class="_his_tab_heard">
      <div>Time</div>
      <div>Item</div>
      <div>Count</div>
      <div>Directions</div>
      <div>Amount</div>
      <div>Fee</div>
      <div>View on BSCScan</div>
    </div>
    <div class="_his_tab_body" v-for="item in list" :key="item.txid">
      <div class="_his_tab_td">
        <div>{{ item.time }}</div>
        <div>{{ item.item }}</div>
        <div>{{ item.count }}</div>
        <div>{{ item.type }}</div>
        <div>
          <!--            <div class="_his_icon"></div>-->
          <div>
            {{ item.type === "sell" ? "+" : "-" }}{{ fromWei(item.amount) }}
          </div>
        </div>
        <div>
          <!--            <div class="_his_icon"></div>-->
          <div>{{ item.type === "sell" ? "-" + fromWei(item.fee) : "-" }}</div>
        </div>

        <div>
          <a :href="scanUrl + 'tx/' + item.txid" target="_blank">
            <img src="@/assets/scan.png" alt="" />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div
    class="_mobile_his_tab_body"
    v-show="mobile"
    v-for="item in list"
    :key="item.txid"
  >
    <div class="_mobile_time_row">
      <label>{{ item.time }}</label>
    </div>
    <div>{{ item.item }}</div>
    <div>
      <label>Count</label>
      <h3>{{ item.count }}</h3>
    </div>
    <div>
      <label>Directions</label>
      <h3>{{ item.type }}</h3>
    </div>
    <div>
      <label>Amount</label>
      <div>
        <!-- <img src="../../../../assets/c1.png" alt="" /> -->
        <label>
          {{ item.type === "sell" ? "+" : "" }}{{ fromWei(item.amount) + " CRA"}}
        </label>
      </div>
    </div>
    <div>
      <label>Fee</label>
      <h3>{{ item.type === "sell" ? "-" + fromWei(item.fee) : "-" }}</h3>
    </div>
    <div class="_mobile_share">
      <label>View on BSCScan </label>
      <a :href="scanUrl + 'tx/' + item.txid" target="_blank">
        <img src="@/assets/scan.png" alt="" />
      </a>
    </div>
  </div>
</template>

<script>
import http from "../../../../http";
import { ref } from "vue";
import { scanUrl } from "../../../../dapp";
import { isMobile,onresizeLayout } from "../../../../common/util";

// const list = ref([])

// async function init() {
//   var res = await http.get("/api/histories");
//   console.log('lch----res----',res)
//   if (res.code === 200) {
//     // list.value = res.data
//   }
// }

// init();

export default {
  data() {
    return {
      scanUrl: scanUrl,
      list: [
        // {
        //   time: "2021-10-21 14:20",
        //   item: "item",
        //   count: "count",
        //   type: "type",
        //   amount: "amount",
        //   fee: "fee",
        //   txid: "txid",
        // },
        // {
        //   time: "2021-10-21 14:20",
        //   item: "item",
        //   count: "count",
        //   type: "type",
        //   amount: "amount",
        //   fee: "fee",
        //   txid: "txid",
        // },
      ],
      mobile: document.body.clientWidth <= 750,
    };
  },
  created() {
    // window.onresize = () => {
    //   onresizeLayout()
    //   window.screenWidth = document.body.clientWidth;
    //   this.mobile = isMobile();
    // };
    // window.onresize();
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      var res = await http.get("/api/histories");
      if (res.code === 200) {
        this.list = res.data ?? [];
      }
    },
  },
};
</script>

<style scoped lang="scss">
._his_table {
  margin-top: 61px;
}
._his_tab_heard {
  display: flex;
  align-items: center;
  padding: 16px 0;
  background-color: #fafafa;
  div {
    height: 22px;
    border-right: 1px solid #ebebeb;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #383838;
    width: 0;
    padding-left: 15px;
    &:nth-child(1) {
      flex-grow: 3.7;
    }
    &:nth-child(2) {
      flex-grow: 2.62;
    }
    &:nth-child(3) {
      flex-grow: 1.21;
    }
    &:nth-child(4) {
      flex-grow: 1.68;
    }
    &:nth-child(5) {
      flex-grow: 1.94;
    }
    &:nth-child(6) {
      flex-grow: 1;
    }
    &:nth-child(7) {
      flex-grow: 2.45;
      border-right: none;
    }
  }
}
._his_tab_body {
  min-height: 516px;
}
._his_tab_td {
  display: flex;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #f1f1f1;
  > div {
    font-weight: 500;
    color: #383838;
    width: 0;
    padding-left: 15px;
    font-size: 13px;
    &:nth-child(1) {
      flex-grow: 3.7;
    }
    &:nth-child(2) {
      flex-grow: 2.62;
    }
    &:nth-child(3) {
      flex-grow: 1.21;
    }
    &:nth-child(4) {
      flex-grow: 1.68;
      color: #179d00;
    }
    &:nth-child(5) {
      flex-grow: 1.94;
      color: #179d00;
      display: flex;
      align-items: center;
    }
    &:nth-child(6) {
      flex-grow: 1;
      color: #179d00;
      display: flex;
      align-items: center;
    }
    &:nth-child(7) {
      flex-grow: 2.45;
      border-right: none;
      display: flex;
      align-items: center;
      img {
        width: 11px;
        height: 11px;
        /*background-color: pink;*/
      }
    }
  }
}
._his_icon {
  width: 30px;
  height: 16px;
  margin-right: 9px;
  background: url("@/assets/c1.png") no-repeat center;
  background-size: cover;
}

%mobile_label {
  font-weight: 500;
  color: #949494;
  font-size: 13px;
}

._mobile_his_tab_body {
  background-color: #f1f1f1;
  padding-top: 5px;
  padding-bottom: 10px;
  margin-top: 20px;
  > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 10px 6px 10px;
    font-size: 16px;
    color: #383838;
    font-weight: 600;
    label {
      @extend %mobile_label;
    }
    h3 {
      @extend %mobile_label;
      color: #179d00;
    }
    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      img {
        width: 23;
        height: 15px;
      }
      label {
        @extend %mobile_label;
        color: #179d00;
      }
    }
  }
  ._mobile_share {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 5px;
    label {
      margin-right: 10px;
    }
  }
}

._mobile_time_row {
  border-bottom: 1px solid #bbbbbb;
  // padding: 10px 0px 10px 0px;
  margin-bottom: 6px;
  label {
    margin-top: 5px;
    margin-bottom: 5px;
    @extend %mobile_label;
  }
}
</style>
